<template>
  <div class="home">
    <!-- <div>{{$store.state.nikeName}}</div> -->
    <!-- <div>{{nikeName}}</div> -->
    <router-link tag="div" class="header" to="/">blog主页</router-link>
    <home-banner></home-banner>
    <home-menu :list="list"></home-menu>
    <home-blog></home-blog>
    <!-- <img alt="Vue logo" src="@/assets/imgs/vue.png"> -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { mapState } from 'vuex'
import HomeBanner from './components/HomeBanner'
import HomeBlog from './components/HomeBlog'
import HomeMenu from './components/HomeMenu'
import axios from 'axios'

export default {
  name: 'Home',
  data() {
    return {
      list:[]
    }
  },
  components: {
    HelloWorld,
    HomeBanner,
    HomeBlog,
    HomeMenu
  },
  computed: {
    ...mapState(['nikeName'])
  },
  /* mounted() {
    axios.get("/api/list.json").then(
      function (res) {
        res=res.data
        //console.log(res.data.list);
        if (res.ret&&res.data) {      
          const data=res.data.list
          for (const item in data) {
            this.list.push(item)
          }
        }
      }
    )
  }, */
  methods: {
    getInfo(){
      axios.get("/api/list.json").then(
        this.getInfoSucc
      )
    },
    getInfoSucc(res){
      res=res.data
      if (res.ret&&res.data) {
        const data=res.data
        this.list=data.list
      }
    }
  },
  mounted() {
    this.getInfo()
  },
}
</script>

<style lang="sass" scoped>
  .header 
    height: 50px
    background: #f8f8f8
    line-height: 50px
    text-align: center
    color: #555
    font-weight: bold
    font-size: 22px
</style>
